iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
1
Modern Web

我可以修改,所以先亂打系列 第 2

第2天:HTML-架構基本標籤

  • 分享至 

  • xImage
  •  

對於一個新手來說,
最重要的莫過於學習的資源,
在接下來的文章內,
我會參考書籍以及一些Youtube影片、網站等等來開始入門,
因為之前就有稍微了解了HTML的架構,
所以文章部分一開始會從標籤介紹與功能開始


網頁的地區與語言設定

    <html lang="en">

表示這個網頁內容語言與地區設定,此設定用意是讓搜尋引擎做出判斷,不會影響到網頁內容。

例如:

    <html lang="zh-Hant-TW"> 即為台灣使用的繁體中文。
    <html lang="en-US">為美國英語  

在HTML5中,lang屬性可用於任何HTML元素,如果整份 html 的語言是用 en,那在網頁中某個區塊想要另外標示為其他語言,就可以直接寫在那個元素上。

例如:

   <p lang="fr">Je suis français</p>

各國語系代碼

head 標籤

<head>
   網頁所需功能
</head>

head標籤沒有參數可以使用,以下是經常使用到的功能:

網頁標題

HTML title 標籤用來設計網頁標題,也就是網路瀏覽器上會顯示的網頁標題

      <title>網頁標題</title>

HTML link 標籤

此功能是用來設定網頁內需要導入的外部資源,例如導入CSS檔案,須注意此標籤並不是超連結

   <link 屬性="" type="屬性種類" href="嵌入檔案">

例如:

   <link rel="stylesheet" type="text/css" href="this_page.css" />

意思即為導入this_page.css檔案,並告知瀏覽器此語言是CSS

HTML base 標籤

HTML base 標籤可以用來控制網頁內的連結屬性

   <base href="超連結網址" target="屬性">

也可以分開寫成兩個標籤:

   <base target="屬性">、<base href="超連結網址">

屬性有分為以下四種:
1. target="_blank"。在新的視窗開啟連結。
2. target="_parent"。在父層視窗開啟連結。
3. target="_self"。在框架內直接開啟連結,若無框架則等同於直接在同一的視窗開啟。
4. target="_top"。以 top 模式開啟連結。

Meta標籤

<meta>為自我閉合標籤,也就是不需要加上閉合標籤。如同放在<head>裡的標籤,一樣都是用來告訴瀏覽器訊息的標籤。

meta元素可以定義文件的各種後設資料,提供各種文件資訊,通俗點說就是可以理解為提供了關於網站的各種資訊。html文件中可以包含多個meta元素,每個meta元素只能用於一種用途,如果想定義多個文件資訊,則需要在head標籤中新增多個meta元素。

<meta name="屬性值" content="內容">

HTML meta name 常用屬性

    name="description" content="網頁簡短描述"
    有機會顯示在搜尋結果的網頁摘要中

    name="keywords" content="關鍵字1.關鍵字2"
    關鍵字標籤,但現在已少用(Google引擎已不使用此屬性)

    name="author" content="作者姓名"
    記錄網頁的作者名稱

    meta name="renderer" content="webkit|ie-comp|ie-stand"
    用於預設用哪種瀏覽器核心渲染版面

    name="generator" content="編輯器名稱"
    記錄網頁編輯器名稱

    name="copyright" content="網頁版權"
    用來標示網頁的版權或著作權聲明

    name="distribution" content="網頁發佈地區"
    用來記錄網頁的發佈地區

    name="viewport" content="width=device-width, initial-scale=1.0"
    設定手機網頁的螢幕解析度
    註1:設定為 width=device-width 就可以自動符合所有不同手機的預設最佳解析度
    註2:設定  initial-scale=1  手機螢幕畫面的初始縮放比例為 100%


每個 meta 使用 name 的時候,都會搭配 content 來呈現資訊內容,簡單來說,name 代表資訊項目,content 代表資訊值。

<meta http-equiv="屬性值" content="內容">
HTML5中能使用的屬性
    http-equiv="Content-Type" content="text/html"; charset="uft-8″ 
    網頁內容的種類以及編碼

    http-equiv="Refresh" content="time" 
    指定一個時間間隔(以秒為單位),在此時間過去之後從伺服器重新載入當前頁面,也可以另外指定一個頁面
    
    http-equiv="default-style" content="text/css"
    定義預設的樣式表

<meta charset="UTF-8">
網頁編碼,UTF-8是萬國碼

body標籤

<body>標籤內會放置給使用者看到的內容</body>

下篇文章中會介紹可以在文章內使用到的一些基本標籤


參考來源:

HTML5 基礎語法-結構 : head, body
小事之 HTML lang Attribute
HTML head 標籤
SEO網站優化教學 2-1如何被收錄-建立Meta Title,Description,Keywords
SEO 網站搜尋優化 - 不要再用 Meta Keywords 關鍵字了,改用 Description 吧!
應該避免的過時語法
HTML meta標籤常用屬性及其作用總結
【HTML】瀏覽器內核控制meta name="renderer" 說明文檔


上一篇
第1天: 從0開始
下一篇
第3天:HTML-文章內可使用的標籤
系列文
我可以修改,所以先亂打30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
TomasLin
iT邦新手 5 級 ‧ 2020-09-18 09:47:58

結果現在不能修改了 XDDDDD

h1144777 iT邦新手 5 級 ‧ 2020-09-18 21:54:13 檢舉

沒關係 我已經放棄修改了XDDD

我要留言

立即登入留言